import './addUser.scss'
import { useState, useRef, useEffect } from 'react'
import { getStuByIdApi, editStuByIdApi } from '../api/stuApi'
import { useNavigate, Outlet, useParams } from 'react-router-dom'
import { useDispatch } from 'react-redux'
import { addStuApiItem } from '../store/stuSplice'

const AddUser = () => {
    const [formData, setFormData] = useState({ name: "", age: "", phone: "", email: "", education: "", graduationschool: "" })
    // vue 中 ref 是直接const title =ref()  react 中 ref 是 useRef()
    const titleRef = useRef()
    // 获取路由上传递的参数
    const params = useParams()
    const navigate = useNavigate()
    const dispatch = useDispatch()

    // 更新name 值
    const updateStuInfo = (value, key) => {
        setFormData({ ...formData, [key]: value })
    }

    useEffect(() => {
        getStuByIdApi(params.id).then(res => {
            setFormData(res.data)
        })
    }, [params])

    // 更改标题颜色
    const changecolor = () => {
        if (titleRef.current) {
            titleRef.current.style.backgroundColor = 'red'
        }
    }

    // 提交
    const submitStuInfo = async (e) => {
        // 阻止表单的默认行为
        e.preventDefault();
        if (params.id) {
            try {
                await editStuByIdApi(params.id, formData)
                navigate('/home', {
                    // 只能通过state传递数据
                    state: {
                        msg: '修改成功'
                    },
                })
            } catch (error) {
                console.error(error)
            }

        } else {
            try {
                // 这里dispatch返回的是一个promise 真的是细
                await dispatch(addStuApiItem(formData))

                navigate('/home', {
                    state: {
                        msg: '添加成功'
                    }
                })
            } catch (error) {
                console.error(error)
            }
        }

    }

    return (
        <div className="addUser">
            <h2
                className="addUser-title"
                onClick={changecolor}
                ref={titleRef}
            >
                欢迎来到新增页面
            </h2>

            <form className="addUser-form" onSubmit={submitStuInfo}>
                <div className="well">
                    <div className="form-group">
                        <label>姓名</label>
                        <input
                            type="text"
                            className="form-control"
                            placeholder="请填写用户姓名"
                            value={formData.name}
                            onChange={(e) => updateStuInfo(e.target.value, "name")}
                        />
                    </div>
                    <div className="form-group">
                        <label>年龄</label>
                        <input
                            type="text"
                            className="form-control"
                            placeholder="请填写用户年龄"
                            value={formData.age}
                            onChange={(e) => updateStuInfo(e.target.value, "age")}
                        />
                    </div>
                    <div className="form-group">
                        <label>电话</label>
                        <input
                            type="text"
                            className="form-control"
                            placeholder="请填写用户电话"
                            value={formData.phone}
                            onChange={(e) => updateStuInfo(e.target.value, "phone")}
                        />
                    </div>
                    <div className="form-group">
                        <label>邮箱</label>
                        <input
                            type="text"
                            className="form-control"
                            placeholder="请填写用户邮箱"
                            value={formData.email}
                            onChange={(e) => updateStuInfo(e.target.value, "email")}
                        />
                    </div>
                    <div className="form-group">
                        <label>学历</label>
                        <select
                            className="form-control"
                            value={formData.education}
                            onChange={(e) => updateStuInfo(e.target.value, "education")}
                        >
                            <option value="小学">小学</option>
                            <option value="初中">初中</option>
                            <option value="高中">高中</option>
                            <option value="本科">本科</option>
                            <option value="硕士">硕士</option>
                            <option value="博士">博士</option>
                        </select>
                    </div>
                    <div className="form-group">
                        <label>毕业学校</label>
                        <input
                            type="text"
                            className="form-control"
                            placeholder="请填写用户毕业院校"
                            value={formData.graduationschool}
                            onChange={(e) =>
                                updateStuInfo(e.target.value, "graduationschool", e)
                            }
                        />
                    </div>
                    <button type="submit" className="btn btn-primary">
                        {params.id ? '确认修改' : '确认添加'}
                    </button>

                </div>
            </form>
            {/* <Outlet /> */}
        </div>
    )
}
export default AddUser